<template>
  <view style="height: 100vh;">
    <layout index="/pages/scm/index/index">
      <div class="app-container">
        <!-- 查询表单 -->
        <van-form @submit="handleQuery" v-show="showSearch">
          <van-field
            label="年份"
            label-width="4em"
            readonly
            clickable
            :value="queryParams.contractYear"
            placeholder="选择年份"
            @click="showYearPicker = true"
          >
            <template #button>
              <van-icon name="calendar-o" />
            </template>
          </van-field>
          <van-popup v-model:show="showYearPicker" position="bottom">
            <van-datetime-picker
              type="year"
              title="选择年份"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onYearConfirm"
              @cancel="showYearPicker = false"
              :formatter="formatter"
            />
          </van-popup>

          <van-field
            label="客户"
            label-width="4em"
            placeholder="请选择客户"
            readonly
            clickable
            :value="selectedCustomerLabel"
            @click="showCustomerPicker = true"
          >
            <template #button>
              <van-icon name="arrow-down" />
            </template>
          </van-field>
          <van-popup v-model:show="showCustomerPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="customerIdOptions"
              value-key="dictLabel"
              @confirm="onCustomerConfirm"
              @cancel="showCustomerPicker = false"
            />
          </van-popup>

          <van-field
            label="物料名称"
            label-width="4em"
            v-model="queryParams.materialName"
            placeholder="请输入物料名称"
            clearable
          />

          <div class="form-buttons">
            <van-button round type="primary" color="#2a9d8f" native-type="submit">搜索</van-button>
            <van-button round plain color="#2a9d8f" @click="resetQuery">重置</van-button>
          </div>
        </van-form>

        <!-- 统计切换 -->
        <van-tabs v-model:active="activeName" title-active-color="#2a9d8f" color="#76c893">
          <van-tab title="季度统计">
            <scroll-view scroll-y class="table-scroll">
              <van-table :columns="columns" :data="quarterList" />
            </scroll-view>
          </van-tab>
          <van-tab title="月份统计">
            <scroll-view scroll-y class="table-scroll">
              <van-table :columns="columns" :data="monthList" />
            </scroll-view>
          </van-tab>
        </van-tabs>
      </div>
    </layout>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 模拟 API 数据
const mockQuarterData = [
  { contractQuarter: '2023-Q1', materialName: '光伏板', incomeAmount: '¥125,000', returnAmount: '¥2,400', saleNum: 100, deliveryNum: 90, returnNum: 10 },
  { contractQuarter: '2023-Q2', materialName: '锂电池', incomeAmount: '¥98,500', returnAmount: '¥1,200', saleNum: 80, deliveryNum: 75, returnNum: 5 },
];

const mockMonthData = [
  { contractMonth: '2023-01', materialName: '节能电机', incomeAmount: '¥50,000', returnAmount: '¥500', saleNum: 50, deliveryNum: 45, returnNum: 5 },
  { contractMonth: '2023-02', materialName: '碳纤维', incomeAmount: '¥30,000', returnAmount: '¥300', saleNum: 30, deliveryNum: 28, returnNum: 2 },
];

// 表格列配置
const columns = [
  { title: '季度/月份', key: 'contractQuarter' },
  { title: '物料名称', key: 'materialName' },
  { title: '已收金额', key: 'incomeAmount' },
  { title: '退款金额', key: 'returnAmount' },
  { title: '订货数量', key: 'saleNum' },
  { title: '发货数量', key: 'deliveryNum' },
  { title: '退货数量', key: 'returnNum' },
];

// 数据初始化
const activeName = ref('first');
const showSearch = ref(true);
const loading = ref(false);
const quarterList = ref([]);
const monthList = ref([]);
const customerIdOptions = ref([
  { dictValue: '1', dictLabel: '绿色能源公司' },
  { dictValue: '2', dictLabel: '环保材料集团' },
  { dictValue: '3', dictLabel: '碳中和科技' },
]);

// 查询参数
const queryParams = reactive({
  customerId: null,
  contractYear: new Date().getFullYear().toString(),
  materialName: null,
});

// 年份选择器
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);
const showYearPicker = ref(false);

// 客户选择器
const showCustomerPicker = ref(false);
const selectedCustomerLabel = ref('');

// 格式化年份
const formatter = (type, val) => {
  if (type === 'year') return `${val}年`;
  return val;
};

// 确认选择年份
const onYearConfirm = (value) => {
  queryParams.contractYear = value.getFullYear().toString();
  showYearPicker.value = false;
};

// 确认选择客户
const onCustomerConfirm = (value) => {
  queryParams.customerId = value.dictValue;
  selectedCustomerLabel.value = value.dictLabel;
  showCustomerPicker.value = false;
};

// 获取数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    quarterList.value = mockQuarterData.filter(item =>
      (!queryParams.customerId || item.customerId === queryParams.customerId) &&
      (!queryParams.materialName || item.materialName.includes(queryParams.materialName))
    );
    monthList.value = mockMonthData.filter(item =>
      (!queryParams.customerId || item.customerId === queryParams.customerId) &&
      (!queryParams.materialName || item.materialName.includes(queryParams.materialName))
    );
    loading.value = false;
  }, 500);
};

// 搜索操作
const handleQuery = () => {
  getList();
};

// 重置操作
const resetQuery = () => {
  queryParams.customerId = null;
  queryParams.materialName = null;
  selectedCustomerLabel.value = '';
  queryParams.contractYear = new Date().getFullYear().toString();
  handleQuery();
};

// 初始化数据
onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.app-container {
  background-color: #f5fbf8;
  padding: 20rpx;
  min-height: 100vh;

  .form-buttons {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;

    .van-button {
      width: 200rpx;
    }
  }

  .table-scroll {
    height: calc(100vh - 400rpx);
  }

  .van-table {
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    margin: 20rpx;

    .van-table__header {
      background-color: #2a9d8f;
      color: white;
    }

    .van-table__body {
      background-color: #f5fbf8;
    }
  }
}
</style>